<template>
	<view class="pageBox">
		<!-- 标题栏 -->
		<view class="topBox">
			<head-navbar :back="true" :bgColor="'#E77817'">
				<view style="color: #FFFFFF;">精选店铺</view>
			</head-navbar>
			<view class="header" style="background-color: #E77817;" @click="toPage(0,'/pages/search/search?keyword=')">
				<view class="top">
					<view class="searchBox">
						<text class="iconfont icon-soushuo"></text>
						<input type="text" placeholder="请输入搜索店铺名称/宝贝/关键词" :value="proNameCur" />
					</view>
					<view class="searchText">搜索</view>
				</view>
			</view>
			<view class="tabs">
				<view class="items" :class="{status: tab == 0}" @click="onChange(0)">全部</view>
				<view class="items" :class="{status: tab == 1}" @click="onChange(1)">热销店铺</view>
				<view class="items" :class="{status: tab == 2}" @click="onChange(2)">品牌店铺</view>
			</view>
		</view>
		<scroll-view scroll-y="true" :style="{height:height+'px'}" @scrolltolower="scrolltolower">
			<!-- <view class="banner">
				<swiper :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration" circular="true"
				 :indicator-color="indicatorColor" :indicator-active-color="indicatorActive" class="swiper-box" @change="changeBanner">
					<swiper-item v-for="(item, index) in slides" :key="index">
						<view class="swiper-item" @tap="navigate('../order/product?id=' + item.hrefPath, item.hrefPath)">
							<image :src="item" mode=""></image>
						</view>
					</swiper-item>
				</swiper>
			</view> -->
			<!-- <shopComponentSmall :list="hotShopList"></shopComponentSmall> -->
			<shopComponents :list="hotShopList" ref="shopComponents"></shopComponents>
		</scroll-view>
	</view>
</template>

<script>
	import * as api from '@/api/user/index.js';
	import shopComponents from '@/components/shopcomp';
	import shopComponentSmall from '@/components/smallShopList';
	let that;
	export default {
		componentName: ['shopComponents', 'shopComponentSmall'],

		components: {
			shopComponents,
			shopComponentSmall
		},
		data() {
			return {
				proNameCur: '',
				height: 0,
				tab:0,
				current:0,
				slides: [require('../../static/img/changePhoto.jpg'), require('../../static/img/changePhoto.jpg'), require(
					'../../static/img/changePhoto.jpg')],
				indicatorDots: 'true',
				indicatorColor: 'rgba(255,255,255,0.6)',
				indicatorActive: '#ff2625',
				autoplay: true,
				interval: 3000,
				duration: 500,
				parmas:{
					pageNum:1,
					pageSize:20
				},
				hotShopList:[]
			}
		},
		onLoad() {
			that = this;
		},
		onShow() {
			this.getGoodsList();
		},
		onReady() {
			let that = this
			uni.getSystemInfo({
				success: function(res) { // res - 各种参数
					let info = uni.createSelectorQuery().select(".topBox");
					info.boundingClientRect(function(data) { //data - 各种参数
						that.height = res.windowHeight - data.height
					}).exec()
				}
			});
		},
		methods: {
			scrolltolower(){
				if(that.hotShopList.length < 20) {
					that.utils.toast('到底了!没有更多的商家')
				}else{
					that.$refs.shopComponents.getGoodsList()
				}
			},
			onChange(val){
				this.tab = val
			},
            changeBanner(e){
            	this.current = e.detail.current
            },
			async getGoodsList() {
				try{
					const ret = await api.getGoodsShop(this.parmas);
					that.hotShopList = ret.data.obj;
					console.log(ret.data)
				}catch(error){
					console.log(error)
				}
			}
		}
	}
</script>

<style lang="scss">
	@import "./index.scss";
</style>
